<template>
  <s-layout :bgStyle="{ color: '#090909' }">
    <image class="commodity" :src="sheep.$url.cdn(detail?.image)"></image>
    <view class="vehicleDetails">
      <view class="priceInformation">
        <view class="ss-flex ss-col-bottom">
          <view class="text-price text-1">{{ detail.issue_price }}</view>
        </view>
        <view class="title">{{ detail.title }}</view>
        <!--        <view v-if="detail.sku_prices.length>1" class="colorSelection ss-flex ss-flex-wrap">-->
        <!--          <view class="colorNumber">{{ detail.sku_prices.length }}色可选</view>-->
        <!--        </view>-->
      </view>
    </view>
    <su-fixed bottom :val="0" :isInset="false">
      <view class="vehicleDetails-footer ss-flex ss-col-center ss-row-between">
        <button @tap="onConfirm">立即订购</button>
      </view>
    </su-fixed>
    <su-popup :round="60" :show="state.showPassWord" :showClose="true" @close="hideQrModal">
      <view class="qr-wrapper">
        <view class="lg-content-form-item">
          <my-input v-model="state.pay_password" :style="style" placeholder="请输入支付密码"
                    :placeholderStyle="placeholderStyle" :inputBorder="false">
            <template v-slot:right>
              <view @tap="sheep.$router.go('/pages/user/password')">
                设置支付密码
              </view>
            </template>
          </my-input>
        </view>
        <view class="qr-btn" @click="handleSave">
          确认
        </view>
      </view>
    </su-popup>
  </s-layout>
</template>

<script setup>
  import { computed, reactive, ref } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import { getSmsCode, getSmsTimer } from '@/sheep/hooks/useModal';

  const userInfo = computed(() => sheep.$store('user').userInfo);

  const placeholderStyle = {
    'color': '#FFF',
    'font-size': '30rpx',
  };

  const option = ref({});

  // 创建订单&跳转
  async function submitOrder() {
    const {
      code,
      data,
    } = await sheep.$api.order.create(state.orderPayload);
    if (code === 1) {
      if (data.status === 'paid') {
        sheep.$router.redirect('/pages/pay/result', {
          orderSN: data.order_sn,
        });
      } else {
        sheep.$router.redirect('/pages/pay/index', {
          orderSN: data.order_sn,
        });
      }
    }
  }

  //创建订单
  async function getOrderInfo() {
    let {
      code,
      data,
    } = await sheep.$api.order.calc(state.orderPayload);
    if (code === 1) {
      state.totalNumber = 0;
      state.orderInfo = data;
      state.orderInfo.goods_list.forEach((item) => {
        state.totalNumber += item.goods_num;
      });
    }
  }

  const imgList = computed(() =>
    detail.images.map((item) => ({
      ...item,
      src: sheep.$url.cdn(item.src),
      poster: sheep.$url.cdn(item.poster),
    })),
  );
  const state = reactive({
    orderPayload: {
      goods_list: [],
    },
    orderInfo: {},
    addressInfo: {},
    invoiceInfo: {},
    totalNumber: 0,
    showCoupon: false,
    couponInfo: [],
    showDiscount: false,
    showPassWord: false,
    pay_password: '',
  });
  const active = ref(0);
  const original_price = ref(0);
  const price = ref(0);
  // 获取商品详情
  const detail = ref({});
  const getData = async (options) => {
    let { id } = options;
    const { code, data } = await sheep.$api.collection.goodsdetail({ collection_id: id });
    if (code === 1) {
      detail.value = data;
    }
  };
  //选择颜色
  const handleColor = (index) => {
    let data = detail.value.sku_prices[index];
    active.value = index;
    let arr = [
      { goods_id: detail.value.id, goods_num: 1, goods_sku_price_id: data[0].id },
    ];
    original_price.value = data.original_price;
    price.value = data.price;
    state.orderPayload.goods_list = arr;
  };

  async function onConfirm() {
    if (!userInfo.value.mobile) {
      uni.showModal({
        title: '提示',
        content: '请先登录再购买',
        cancelText: '取消',
        confirmText: '去登录',
        success: function(res) {
          if (res.confirm) {
            sheep.$router.go('/pages/index/login');
          }
        },
      });
      return;

    }
    if (userInfo.value.is_verify_identity == 0) {
      uni.showModal({
        title: '提示',
        content: '请先完成用户实名认证再购买',
        cancelText: '取消',
        confirmText: '去设置',
        success: function(res) {
          if (res.confirm) {
            sheep.$router.go('/pages/user/attestation');
          }
        },
      });
      return;

    }
    if (userInfo.value.is_verify_identity != 1) {
      uni.showToast({
        title: '需要购买身份才能购买',
        icon: 'none',
      });
      return;
    }
    state.showPassWord = true;
  }

  async function handleSave() {
    if (!state.pay_password) {
      uni.showToast({
        title: '请输入支付密码',
        icon: 'none',
      });
      return;
    }
    let { id } = option.value;
    const {
      code,
      msg,
      data,
    } = await sheep.$api.collection.identityBuy({
      collection_id: id,
      pay_password: state.pay_password,
    });
    state.showPassWord = false;
    if (code === 1) {
      sheep.$helper.toast('购买成功');
      sheep.$store('user').updateUserData();
      sheep.$router.back();
    }
  }

  function hideQrModal() {
    state.showPassWord = false;
  }

  onLoad((options) => {
    option.value = options;
    getData(options);
  });
</script>

<style lang="scss" scoped>
  .log-card-img {
    width: 100%;
    height: 100%;
  }

  .vehicleDetails {
    padding: 15px 15px 110px;
    box-sizing: border-box;
    background-color: #090909;


    .priceInformation {
      padding: 20px;
      box-sizing: border-box;
      background: #1C1C1E;
      border-radius: 10px;
      margin-bottom: 10px;

      .text-1 {
        font-weight: 500;
        font-size: 26px;
        color: #00A1FF;
        margin-right: 10px;
      }

      .text-2 {
        font-weight: 400;
        font-size: 16px;
        color: #767676;
        line-height: 26px;
        text-decoration-line: line-through;
      }

      .title {
        font-weight: 400;
        font-size: 17px;
        color: #FFFFFF;
        margin: 30px 0 26px;
      }

      .colorSelection {
        .colorNumber {
          font-weight: 400;
          font-size: 15px;
          color: #E4E4E4;
          margin-right: 15px;
          margin-bottom: 10px;
        }

        .item {
          width: 83px;
          height: 26px;
          line-height: 26px;
          background: #2A2A2D;
          border-radius: 13px;
          font-weight: 400;
          font-size: 13px;
          color: #E4E4E4;
          padding: 3px 18px 3px 3px;
          box-sizing: border-box;
          margin-right: 10px;
          margin-bottom: 10px;

          &.active {
            color: #13C093;
            background: transparent;
            border: 1px solid #13C093;
          }
        }

        .icon-car {
          width: 21px;
          height: 21px;
        }
      }
    }

    .product-content {
      background: #1C1C1E;
      border-radius: 10px;
      padding: 24px 15px;
      box-sizing: border-box;

      .tab {
        padding: 0 4px;
        box-sizing: border-box;
        font-weight: 400;
        font-size: 18px;
        color: #FFFFFF;
        margin-bottom: 25px;

      }

      .productDetails {
        color: #fff;

        image {
          width: 100%;
        }
      }
    }
  }

  .commodity {
    width: 100%;
    height: 375px;
  }

  .vehicleDetails-footer {
    padding: 20px 15px;
    box-sizing: border-box;
    background: #151515;

    button {
      width: 100%;
      height: 38px;
      line-height: 38px;
      text-align: center;
      border-radius: 19px;
      font-weight: 500;
      font-size: 16px;
      color: #090909;
      background: linear-gradient(90deg, #45C9F0, #36F6AF);
    }
  }

  .qr-wrapper {
    height: 400rpx;
    display: flex;
    padding: 20rpx;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;

    .lg-content-form-item {
      background: #1C1C1C;
      border-radius: 50rpx;
      padding: 15rpx 40rpx;
      margin-top: 40rpx;
    }

    .qr-title {
      font-size: 40rpx;
      text-align: center;
      color: #FFFFFF;
    }

    .qr-img {
      width: 385rpx;
      height: 385rpx;
      background: #FFFFFF;
      border-radius: 40rpx;
      padding: 50rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .qr-tips {
      text-align: center;
      font-size: 26rpx;
      color: #888888;
    }

    .qr-btn {
      text-align: center;
      width: 250rpx;
      height: 82rpx;
      line-height: 82rpx;
      background: linear-gradient(90deg, #45C9F0, #36F6AF);
      border-radius: 41rpx;
      font-size: 30rpx;
      color: #090909;
    }
  }
</style>
